<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .nav ul {
    list-style: none;
    display: flex;
    font-size: 20px;

    li {
      margin: 10px 10px;
    }

    li.active {
      color: red;
    }
  }

  .content {
    width: 800px;
  }

  .content dl {
    height: 120px;
  }

  .content dl dt {
    float: left;
  }

  .content {
    font-size: 12px;
    line-height: 24px;
  }

  .footer {
    width: 800px;
  }

  .footer button,
  .footer p,
  .nthpage {
    float: left;
  }

  .pagebox span {
    float: left;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    margin: 0 4px;
    text-align: center;
    line-height: 28px;
  }

  .pagebox span:hover {
    cursor: pointer;
  }

  .pagebox span.on {
    color: red;
  }

  .prevPage,
  .nextPage {
    width: 30px;
    height: 30px;
  }
</style>

<body>
  <input type="text" class="searchTxt"><button class="search">搜索</button>
  <div class="nav">
    <ul>
      <li class="active">综合排序</li>
      <li>评价热度</li>
      <li>总收藏</li>
      <li>总月票</li>
      <li>字数</li>
    </ul>
  </div>
  <div class="content"></div>
  <div class="footer">
    <button class="prevPage" disabled></button>
    <div class="pagebox"></div>
    <button class="nextPage">></button>
    <p>共 <span class="totalPage">0</span>页</p>
    <p> <input type="text" class="nthpage"><button class="go">go</button> </p>
  </div>
</body>
<script src="./data.js"></script>
<script>
  function Page(a) {
    Object.assign(this, a);
    console.log(this, 'this')
    this.init()//Page函数里有init函数这是对函数的调用,Page.prototype 函数里是对函数的定义
  }
  Page.prototype = {
    init: function () {
      var that = this;
      this.num = Math.ceil(this.arr.length / 3)
      this.render(that.arr)
      this.pageRender(this.num)
      this.bindEvent(that.arr)
      this.sort([...that.arr])
      this.clear()
      this.filter()

    }
    , render: function (arr) {
      var that = this;

      that.content.innerHTML = arr.slice(that.count * 3, (that.count + 1) * 3).map(function (v, i) {
        return `<dl>
    <dt><img src="${v.url}" width="100" height="100"></dt>
    <dd class="da">${v.title}</dd>
    <dd>${v.con}</dd>
    <dd>
      <span>更新：${v.time}</span>
      <span>字数：${v.zishu}</span>
      <span>综合：${v.zonghe}</span>
      <span>热度：${v.hot}</span>
      <span>收藏：${v.cang}</span>
      <span>总月票：${v.yue}</span>
    </dd>
  </dl>`
      }).join('')
      that.dl = document.querySelectorAll(".content dl")
    }
    , sort: function (arr) {
      var that = this;
      this.ul.onclick = (e) => {  // 使用箭头函数
        var t = e.target;
        that.count = 0;
        if (t.tagName == 'LI' && t.innerHTML == '综合排序') {
          that.brr = arr.sort(function (a, b) {
            return a.zonghe - b.zonghe;
          });
          that.render(that.brr);
          that.lis.forEach(function (v) {
            v.classList.remove('active');
          });
          t.classList.add('active');
        }
        if (t.tagName == 'LI' && t.innerHTML == '评价热度') {
          that.brr = arr.sort(function (a, b) {
            return a.hot - b.hot
          });
          that.render(that.brr);
          that.lis.forEach(function (v) {
            v.classList.remove('active');
          })
          t.classList.add('active');
        }
        if (t.tagName == "LI" && t.innerHTML == "总月票") {
          that.brr = arr.sort(function (a, b) {
            return a.yue - b.yue
          })
          that.render(that.brr)
          that.lis.forEach(function (v, i) {
            v.classList.remove("active")
          })
          t.classList.add("active")
        }
        if (t.tagName == "LI" && t.innerHTML == "字数") {
          that.brr = arr.sort(function (a, b) {
            return a.zishu - b.zishu
          })
          that.render(that.brr)
          that.lis.forEach(function (v, i) {
            v.classList.remove("active")
          })
          t.classList.add("active")
        }
        if (t.tagName == 'LI' && t.innerHTML == '总收藏') {
          that.brr = arr.sort(function (a, b) {
            return a.cang - b.cang;
          });
          that.render(that.brr);
          that.lis.forEach(function (v) {
            v.classList.remove('active');
          });
          t.classList.add('active');
        }
      }
    }
    , pageRender: function (y) {//渲染页码使用的时str=‘’
      var that = this;
      var str = "";
      for (var i = 0; i < y; i++) {
        if (i == 0) {
          str += `<span class="on">${i + 1}</span>`
        } else {
          str += `<span>${i + 1}</span>`
        }
      }
      console.log(str, 'str')
      that.pagebox.innerHTML = str;
      that.spans = document.querySelectorAll(".pagebox span")
      that.totalPage.innerHTML = that.spans.length
    },
    bindEvent: function (arr) {
      var that = this;
      this.prevPage.onclick = function () {
        that.count--;
        clear()
        that.render(arr)
      }
      this.nextPage.onclick = function () {
        that.count++;
        clear()
        that.render(arr)
      }
      this.spans.forEach(function (v, i) {
        v.onclick = function () {
          that.count = i
          that.clear()
          that.render(arr)
        }
      })

      this.go.onclick = function () {
        var z = that.nthpage.value
        that.count = z - 1
        if (z >= 1 && z <= that.num) {
          that.render(arr)
          that.clear()
          that.nthpage.value = ""
        } else {
          window.alert("请输入正确的页码")
          that.nthpage.value = ""
        }
      }
    }
    , clear: function () {//高亮
      var that = this;
      that.spans.forEach(function (v, i) {
        v.classList.remove("on")
      })
      that.spans[that.count].classList.add("on")
      if (that.count >= that.num - 1) {
        that.nextPage.disabled = true;
      } else {
        that.nextPage.disabled = false;
      }
      if (that.count <= 0) {
        that.prevPage.disabled = true;
      } else {
        that.prevPage.disabled = false;
      }
    },
    filter: function () {//搜索的事件
      var that = this;
      that.button.onclick = function () {

        that.count = 0;
        that.crr = that.arr.filter(function (v, i) {
          return v.title.indexOf(that.searchTxt.value) != -1
        })
        that.num = Math.ceil(that.crr.length / 3)
        that.render(that.crr)
        that.pageRender(that.num)
        that.bindEvent(that.crr)
        that.sort([...that.crr])
      }
    }
  }


  new Page({
    content: document.querySelector(".content"),
    count: 0,
    arr: data,
    pagebox: document.querySelector(".pagebox"),
    nextPage: document.querySelector(".nextPage"),
    prevPage: document.querySelector(".prevPage"),
    ul: document.querySelector(".nav ul"),
    button: document.querySelector(".search"),
    searchTxt: document.querySelector(".searchTxt"),
    nthpage: document.querySelector(".nthpage"),
    go: document.querySelector(".go"),
    lis: document.querySelectorAll(".nav li"),
    totalPage: document.querySelector(".totalPage")
  })
</script>

</html>